<template>
  <div class="reset_password_box">
    <div class="background_color_layout" >
      <div class="logo_box" v-if="window === window.top">
        <div>
            <img :src="loginInLogoUrl" class="yun_logo" />
          </div>
          <div class="name_font">认证中心</div>
      </div>
      <div class="reset_password_form_box">
        <div class="reset_password_form">
          <div>
            <span class="rest_password_go_back" @click="$router.go(-1)">
              <Icon type="ios-arrow-back" />返回上页
            </span>
            <span class="rest_password_form_title">重置密码</span>
          </div>
          <Form :ref="formRef" :model="formData" :rules="fromRules">
            <FormItem prop="phone" label="电话">
              <Input type="text" v-model="formData.phone" placeholder="请输入电话号码" />
            </FormItem>
            <FormItem prop="password" label="新密码">
              <Input type="password" v-model="formData.password" placeholder="8-16位,包含大小写字母,数字,特殊字符" />
            </FormItem>
            <FormItem prop="smsCode" label="验证码">
              <Input type="text" v-model="formData.smsCode" placeholder="请输入短信验证码">
              <span slot="append" style="color: #2d8cf0">
                <Button type="primary" @click="handleSendSms" :disabled="disableSendSms">{{ smsText }}</Button>
              </span>
              </Input>
            </FormItem>
            <Button type="primary" @click="handleSubmit" long>重置密码</Button>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Form,
  FormItem,
  Input,
  Avatar,
  Button,
  Message,
  Icon
} from "view-design";
import Uuid from "uuid";
import config from "@/utils/config";
import appService from "@/utils/appService";
export default {
  components: {
    Form,
    FormItem,
    Input,
    Avatar,
    Button,
    Icon
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        var reg = new RegExp(config.passwordReg);
        if (value.length < 32 && !reg.test(value)) {
          callback(new Error("8-16位,包含大小写字母,数字,特殊字符"));
        } else {
          callback();
        }
      }
    };
    return {
      loginInLogoUrl: require("@/assets/shimingrenzheng.png"),
      window: window,
      smsText: "发送验证码",
      disableSendSms: false,
      clientName: "unknown",
      formRef: Uuid.v1(),
      formData: {
        phone: "",
        password: "",
        smsCode: ""
      },
      fromRules: {
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          },
          { validator: validatePassword, trigger: "blur", trigger: "change" }
        ],
        smsCode: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    async handleSendSms() {
      let formData = this.formData;
      if (!formData.phone) {
        Message.error("请填写号码");
      } else {
        let resposne = await appService.getRequest(
          `${config.serverProxy}${config.authServicePath}/sms/sendRandomCode`,
          { phone: formData.phone }
        );
        if (resposne.data.errorCode === 0) {
          this.disableSendSms = true;
          let countdown = 60;
          let point = window.setInterval(() => {
            if (countdown == 0) {
              this.disableSendSms = false;
              this.smsText = "发送验证码";
              window.clearInterval(point);
            } else {
              this.smsText = countdown + "s";
              countdown = countdown - 1;
            }
          }, 1000);
        }
      }
    },
    handleSubmit() {
      this.$refs[this.formRef].validate(async valid => {
        if (valid) {
          let formData = this.formData;
          let resposne = await appService.putRequest(
            `${config.serverProxy}${config.authServicePath}/auth/signIn/resetUserPassword`,
            formData
          );
          if (resposne.status === 200 && resposne.data.errorCode === 0) {
            Message.success("重置成功, 2秒后返回登陆页");
            window.setTimeout(() => {
              this.$router.go(-1);
            }, 2000);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.reset_password_box {
  background: #ffffff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: url(../../assets/login_bg.jpeg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;


  .background_color_layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.388235294117647);


    .logo_box {
      display: flex;
      justify-content: center;
      padding: 20px;
      .yun_logo {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .name_font {
        font-weight: 700;
        font-style: normal;
        font-size: 30px;
        color: #fff;
        display: flex;
        padding-left: 20px;
        align-items: center;
        justify-content: center;
      }
    }

    .reset_password_form_box {
      display: flex;
      justify-content: center;

      .reset_password_form {
        width: 400px;
        height: 100%;
        background: #ffffff;
        padding: 20px;

        .rest_password_go_back {
          font-size: 14px;
          color: #999;
          vertical-align: middle;
          font-weight: 700;
          white-space: nowrap;
          margin-right: 30px;
        }

        .rest_password_form_title {
          font-size: 18px;
          color: #333;
          vertical-align: middle;
          font-weight: 700;
          white-space: nowrap;
        }

      }

    }
  }

}


.forget_password {
  color: #999;
  text-align: right;
}
</style>